<template>
    <div class="financialLicence">
      <div class="header">
        <van-nav-bar title="金融牌照" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <section class="head">
        <div class="head_div">
          <div class="head_con">
            <p>您来自哪个城市？</p>
            <div class="xiala">
              <input type="text" placeholder="请选择省市区" :value="addrInif"  readonly="readonly" @click="onSelAddr()">
              <img src="../../assets/images/greenFinance/15.png">
            </div>
            <van-popup v-model="showAdder" position="bottom" :overlay="false">
              <van-area :area-list="areaList" @confirm="onAddrConfirm" @cancel="onAddrCancel" />
            </van-popup>
            <p>您目前有其他金融服务牌照吗？</p>
            <div class="xiala">
              <input type="text" placeholder="请选择" :value="radioList"  readonly="readonly" @click="addressShow()">
              <img src="../../assets/images/greenFinance/15.png">
            </div>
            <div class="danxuan" v-show="show">
              <van-radio-group v-model="radioList">
                <van-radio name="没有" checked-color="#feb03a" @click="radioYes()">没有</van-radio>
                <van-radio name="有，我有一个或多个牌照" checked-color="#feb03a" @click="radioYes()">有，我有一个或多个牌照</van-radio>
                <van-radio name="我申请过，但是没有下来" checked-color="#feb03a" @click="radioYes()">我申请过，但是没有下来</van-radio>
                <van-radio name="我有过牌照，但是被取消了" checked-color="#feb03a" @click="radioYes()">我有过牌照，但是被取消了</van-radio>
              </van-radio-group>
            </div>

            <p>申请者曾经有过破产，或担任过破产公司董事吗？</p>
            <div class="xiala">
              <input type="text" placeholder="请选择" :value="radio"  readonly="readonly" @click="addInput()">
              <img src="../../assets/images/greenFinance/15.png">
            </div>
            <div class="danxuan" v-show="showInput">
              <van-radio-group v-model="radio">
                <van-radio name="是"  checked-color="#feb03a" @click="yes()">是</van-radio>
                <van-radio name="否"  checked-color="#feb03a" @click="yes()">否</van-radio>
              </van-radio-group>
            </div>
            <p>您在第一年中计划申请牌照的预算是多少？</p>
            <input type="number" placeholder="请填写预算（请使用美元单位给我们报价）"  class="input2" v-model.trim='formData.budget' oninput="if(value>900000000)value=900000000">
          </div>
        </div>
      </section>
      <header>
        <img src="../../assets/images/greenFinance/6.png"/>
        <p>您的信息已受到保护，请放心填写</p>
      </header>
      <section class="section">
        <div class="registration_from3">
          <p>服务要求</p>
          <div class="xiala1">
            <input type="text" placeholder="请选择" :value="radioData"  readonly="readonly" @click="Finance()">
            <img src="../../assets/images/greenFinance/12.png">
          </div>
          <div class="danxuan1" v-show="showFinance">
            <van-radio-group v-model="radioData">
              <van-radio name="NFA牌照" checked-color="#07c160" @click="radioFinance()">NFA牌照</van-radio>
              <van-radio name="数字货币牌照" checked-color="#07c160" @click="radioFinance()">数字货币牌照</van-radio>
              <van-radio name="国际金融牌照" checked-color="#07c160" @click="radioFinance()">国际金融牌照</van-radio>
              <van-radio name="注册公司，办理海外银行账户" checked-color="#07c160" @click="radioFinance()">注册公司，办理海外银行账户</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="registration_from">
          <p>法人姓名</p>
          <input type="text" placeholder="填写法人中文姓名" class="input1" v-model.trim='formData.aname'>
        </div>
        <div class="registration_from">
          <p>联系电话</p>
          <input type="number" placeholder="填写法人联系方式" class="input1" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)">
        </div>
        <div class="registration_from2">
          <p>身份证号码</p>
          <input type="text" placeholder="填写法人身份证号码" class="input1" v-model.trim='formData.capital'>
        </div>
        <div class="registration_from">
          <p>公司名称</p>
          <input type="text" placeholder="填写公司中文名称" class="input1" v-model.trim='formData.corporateName'>
        </div>
        <div class="registration_from">
          <p>公司地址</p>
          <div class="xiala1">
            <input type="text" placeholder="请选择省市区" :value="addressInif" @click="onSelAddr1()" readonly="readonly">
            <img src="../../assets/images/greenFinance/12.png">
          </div>
          <van-popup v-model="showAdder1" position="bottom" :overlay="false">
            <van-area :area-list="areaData" @confirm="onAddrData" @cancel="onAddrCancel" />
          </van-popup>
        </div>
        <div class="registration_from1">
          <p class="p01">上传证件信息</p>
          <div class="Merchant_foot">
            <div class="Merchant_foot_div">
              <img :src="formData.avatarshow3?formData.avatarshow3:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar3">
              <input type="file" name="avatar3" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage3($event)" ref="avatarInput3" >
              <p>公司营业执照</p>
            </div>
            <div class="Merchant_foot_div">
              <img :src="formData.avatarshow?formData.avatarshow:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar" >
              <input type="file" name="avatar" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage($event)" ref="avatarInput" >
              <p>身份证正面</p>
            </div>
            <div class="Merchant_foot_div">
              <img :src="formData.avatarshow1?formData.avatarshow1:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar1">
              <input type="file" name="avatar1" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage1($event)" ref="avatarInput1" >
              <p>身份证反面</p>
            </div>
            <div class="Merchant_foot_div">
              <img :src="formData.avatarshow2?formData.avatarshow2:require('../../assets/images/greenFinance/bjtu.png')" @click="setAvatar2">
              <input type="file" name="avatar2" accept="image/*" style="display:none;width: 0.8rem;height: 0.8rem;" @change="changeImage2($event)" ref="avatarInput2" >
              <p>手持身份证</p>
            </div>
          </div>
        </div>
        <div class="registration_from">
          <p>备注</p>
          <textarea type="text" placeholder="请留下您想咨询的问题，我们会在最快的时间回复您，谢谢！" rows="3" v-model.trim='formData.businessScope'></textarea>
        </div>
      </section>
      <button class="Merchant_button" @click="submit()">提交申请</button>
      <footer>
        <div class="foot">
          <div class="footer_left">
            <a :href="'tel:' + 13518071508">
            <img src="../../assets/images/greenFinance/16.png">
            </a>
          </div>
          <div class="footer_right" @click="toApplicationRecord()">
            <img src="../../assets/images/greenFinance/17.png">
          </div>
        </div>
      </footer>
      <!--<div style="position: fixed;bottom: 1rem;right: 0.1rem;width: 0.6rem;height: 0.6rem;" @click="toLink()">-->
        <!--<img src="../../assets/images/greenFinance/31.png" style="width: 100%;">-->
      <!--</div>-->
    </div>
</template>

<script>
  import  AdderssInif from '../../../static/area'
    export default {
        name: "financialLicence",
      data() {
        return {
          show:false,
          radio:'',
          radioList:'',
          radioData:'',
          areaList:AdderssInif,
          areaData:AdderssInif,
          addrInif:'',
          addressInif:'',
          showAdder:false,
          showInput:false,
          showFinance:false,
          showAdder1:false,
          formData: {
            aname: '',
            aphone: '',
            capital:'',
            businessScope:'',
            avatar: '',
            avatarshow: '',
            avatar1: '',
            avatarshow1: '',
            avatar2: '',
            avatarshow2: '',
            avatar3: '',
            avatarshow3: '',
            budget:'',
            corporateName:'',
          },



        }
      },
      mounted() {


      },
      methods: {
        //返回
        onClickLeft() {
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          let params={

          };
          if (isAndroid) {
            console.warn('finish');
          } else if (isiOS) {
            window.webkit.messageHandlers.onClickLeftYuansheng.postMessage(params);
          }

        },
        //显示邮寄地址
        addressShow(){
          this.show=true
        },
        radioYes(){
          this.show=false
        },
        addInput(){
          this.showInput=true
        },
        yes(){
          this.showInput=false
        },
        Finance(){
          this.showFinance=true
        },
        radioFinance(){
          this.showFinance=false
        },
        //显示地址
        onSelAddr(){
          this.showAdder=true
        },
        //显示地址
        onSelAddr1(){
          this.showAdder1=true
        },
        //显示地址确定
        onAddrConfirm(val){
          this.showAdder=false;
          this.addrInif=val[0].name+''+val[1].name+''+val[2].name
          console.log("111",this.addrInif)
        },
        onAddrData(e){
          this.showAdder1=false;
          this.addressInif=e[0].name+''+e[1].name+''+e[2].name
          console.log("222",this.addressInif)
        },
        //显示地址取消
        onAddrCancel(){
          this.showAdder=false
          this.showAdder1=false;
        },
        //跳转申请记录
        toApplicationRecord(){
          this.$router.push({path: '/licenceApplication', query:{}})
        },

        //点击图片(身份证正面)触发该方法
        setAvatar() {
          //获得ref为avatarInput节点，并触发该节点
          this.$refs.avatarInput.click()
        },
        //选择上传图片（身份证正面），并将图片进行处理
        changeImage(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar = file;//对象格式，用于传向后台
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow = this.result//base64解析，用于页面上图片展示
          }
        },
        //点击身份证背面
        setAvatar1() {
          this.$refs.avatarInput1.click()
        },
        //选择身份证背面
        changeImage1(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar1 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow1 = this.result
          }
        },
        //点击手持身份证
        setAvatar2() {
          this.$refs.avatarInput2.click()
        },
        //选择手持身份证
        changeImage2(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar2 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow2 = this.result
          }
        },
        //点击营业执照
        setAvatar3() {
          this.$refs.avatarInput3.click()
        },
        //选择营业执照
        changeImage3(e) {
          var file = e.target.files[0]
          var reader = new FileReader()
          var that = this
          that.formData.avatar3 = file;
          reader.readAsDataURL(file)
          reader.onload = function(e) {
            that.formData.avatarshow3 = this.result
          }
        },
        // 提交所有数据----请求后台
       submit() {
         var token = this.$cookies.get("token")||localStorage.getItem('token');
         let u = navigator.userAgent;
         let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
         let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
         if(!token){
           if (isAndroid) {
             console.warn("ecologylogin");
           } else if (isiOS) {
             window.webkit.messageHandlers.goBackLogin.postMessage(null);
           }
         }else {
           if(this.radio == '是') {
             this.radio = true
           } else {
             this.radio = false
           }
           let this_ = this;
           const formDatas = new FormData()
           formDatas.append('from_city', this.addrInif)//省
           formDatas.append('whether_is', this.radioList)//市
           formDatas.append('whether_manage', this.radio)//区
           formDatas.append('phone', this_.formData.aphone)//电话
           formDatas.append('first_budget', this_.formData.budget)//店铺详细地址
           formDatas.append('service_demand', this.radioData)//法人姓名
           formDatas.append('legal_person', this_.formData.aname)
           formDatas.append('legal_identity_card', this_.formData.capital)
           formDatas.append('company_name', this_.formData.corporateName)
           formDatas.append('company_address', this.addressInif)
           formDatas.append('remark_info', this_.formData.businessScope)
           formDatas.append('card_front_image_url', this_.formData.avatar)//身份证正面
           formDatas.append('card_back_image_url', this_.formData.avatar1)//身份证背面
           formDatas.append('business_image_url', this_.formData.avatar3)//公司营业执照
           formDatas.append('card_hand_image_url', this_.formData.avatar2)//手持身份证
           //发送请求到后台
           this.$axios({
             method: "post",
             url: '/api/common/v1/greenFinance/financialLicenceApplication',
             data: formDatas,
             headers: {
               'Content-Type': 'multipart/form-data'
             }
           }).then(res => {
             if(this.radio ==true ) {
               this.radio = '是'
             } else {
               this.radio ='否'
             }
             this.$toast(res.msg);
           }).catch(res => {

             this.$toast(res.msg);
           })
         }
        },
        async toLink(){
          const res = await this.$axios.post(this.$api.businessCirclesData);
          if (res.data) {
            this.$router.push({path: '/licenceProcess'})
          } else {
            this.$toast(res.msg);
          }
        }


      }
    }
</script>

<style scoped>
  .financialLicence{width: 100%;background-color: #fff;}
  .head{width: 100%;padding-top: 0.46rem;}
  header{width: 100%;overflow: hidden;height: 0.43rem;line-height: 0.43rem;border-bottom: 2px solid #f7f7f7;}
  header img{width: 0.13rem;float: left;margin:0.12rem 0.1rem 0.12rem 0.15rem;}
  header p{float: left;color: #ff3d3d;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;width: 24%;text-align: left;padding-left: 0.2rem;}
  .input1{float: right;height: 0.4rem;width: 66%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-right: 0.21rem;margin-bottom: 0.1rem;}
  .input2{height: 0.33rem;width: 90%;background:rgba(250,250,250,0.4);border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-bottom: 0.1rem;}
  .input2::placeholder{color: #feb03a;}
  textarea{width: 90%;margin: 0 5%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding:0.1rem;line-height: 0.22rem;}
  .registration_from1 p{width: 100%;width: 24%;text-align: left;padding-left: 0.2rem;}
  .Merchant_button {width: 90%;color: #fff;font-size: 0.16rem;margin: 0.1rem 5% 0.9rem;background-color: #ff8d39;border: 0;border-radius: 0.05rem;line-height: 0.44rem;}
  .xiala{width: 90%;border-radius: 0.05rem;overflow: hidden;background:rgba(250,250,250,0.4);}
  .xiala input{float: left;height: 0.33rem;width: 90%;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala input::placeholder{color: #feb03a;}
  .xiala img{float: left;width: 0.12rem;margin-top: 0.13rem;}


  .danxuan{background:rgba(250,250,250,0.4);width: 90%;border-radius: 0.05rem;}
  .van-radio{padding: 0.05rem 0 0.03rem 0.2rem;}
  .van-checkbox{line-height: 0.4rem;padding-left: 0.9rem;}
  .p1{text-align: center;}
  .xiala1{width: 66%;border-radius: 0.05rem;overflow: hidden;background-color: #f2f2f2;margin-right: 0.21rem;float: right;margin-bottom: 0.1rem;}
  .xiala1 input{float: left;height: 0.4rem;width: 90%;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala1 img{float: left;width: 0.12rem;margin-top: 0.15rem;}
  .registration_from2{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from2 p{float: left;width: 23%;text-align: right}
  .Merchant_foot{width: 100%;margin: 0 auto;background-color: #fff;overflow: hidden;}

  .danxuan1{background-color: #f2f2f2;width: 66%;border-radius: 0.05rem;margin: 0 0 0.1rem 28.5%;}
  .registration_from3{overflow: hidden;width: 100%;}
  .registration_from3 p{float: left;width: 24%;text-align: left;padding-left: 0.2rem;line-height: 0.45rem;}
  footer{width: 100%;position: fixed;bottom: 0;background-color: #fff;padding-bottom: 0.1rem;}
  .foot{overflow: hidden;width: 98%;margin: 0 auto;}
  .footer_left{width: 50%;position: relative;right: -0.09rem;float: left}
  .footer_left img{width: 100%;height: 0.54rem}
  .footer_right{width: 50%;position: relative;left:-0.08rem;float: left}
  .footer_right img{width: 100%;height:0.54rem}
  .footer_left a{font-size: 0.4rem;}
  .p01{float: left;width: 90%!important;text-align: left;padding-left: 0.2rem;line-height: 0.45rem;}
  @media screen and (min-width:320px) and (max-width:374px) and (orientation:portrait) {
    .head_con{
      width: 90%;
      margin: 0 auto;
      position: relative;
      top: 0.8rem;
    }
    .head_con p{color: #fff;line-height: 0.2rem;}
    .head_div{width: 90%;margin: 0.2rem auto 0;background: url(../../assets/images/greenFinance/14.png) no-repeat;background-size: 100% ;height: 4rem; }
    .Merchant_foot_div{width: 24%;float: left;}
    .Merchant_foot_div p{font-size: 0.11rem;padding: 0.1rem 0 0.1rem 0.05rem!important;text-align: center;color: #808080;width: 100%!important;}
    .Merchant_foot_div img{width: 0.6rem;height: 0.6rem;margin-left: 15%;}
  }
  @media screen and (min-width:375px) and (max-width:414px) and (orientation:portrait) {
    .head_con{
      width: 90%;
      margin: 0 auto;
      position: relative;
      top:1.05rem;
    }
    .head_con p{color: #fff;line-height: 0.33rem;}
    .head_div{width: 90%;margin: 0.2rem auto 0;background: url(../../assets/images/greenFinance/14.png) no-repeat;background-size: 100% ;height: 4.65rem; }
    .Merchant_foot_div{width: 24%;float: left;}
    .Merchant_foot_div p{font-size: 0.11rem;padding: 0.1rem 0 0.1rem 0.1rem!important;text-align: center;color: #808080;width: 100%!important;}
    .Merchant_foot_div img{width: 0.8rem;height: 0.8rem;margin-left: 15%;}
  }
</style>
